<template>
  <div>
    <a-table
      :row-selection="rowSelection"
      :columns="columns"
      :data-source="SXGroupData"
      :pagination="pagination"
      :customRow="onClickRow"
      bordered
    >
      <a slot="name" slot-scope="text">{{ text }}</a>
    </a-table>  
  </div>
</template>

<script>
const columns = [
  {
    title: "实习小组",
    dataIndex: "name",
  },
  {
    title: "名额",
    dataIndex: "NumPeople",
  },
  {
    title: "指导老师",
    dataIndex: "teacherName",
  },
  {
    title: "联系电话",
    dataIndex: "teacherPhone",
  },
];
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      columns, //标头的配置
    };
  },
  methods: {
    ...mapMutations("Apply", ["setSXGroupData", "setSXGroupKey"]),
    getGroupData() {
      this.$api
        .StudentGetGroupById({ id: this.SXDirectionKey[0] })
        .then((res) => {
          var tempData = res.data.result.map((item) => {
            return {
              key: item.id,
              name: item.name,
              NumPeople: item.quota,
              teacherName: item.teacherName,
              teacherPhone: "1760785415",
            };
          });
          this.setSXGroupData(tempData);
        });
    },
    //点击行
    onClickRow(SelecrRow) {
      return {
        on: {
          click: () => {
            this.setSXGroupKey(SelecrRow.key);
          },
        },
      };
    },
  },
  computed: {
    ...mapState("Apply", ["SXDirectionKey", "SXGroupData", "SXGroupKey"]),
    rowSelection() {
      return {
        type: "radio", //单选
        selectedRowKeys: this.SXGroupKey, //默认的选中项
        //点击前面的单选按钮
        onChange: (selectedRowKeys) => {
          this.setSXGroupKey(selectedRowKeys[0]);
        },
      };
    },
    pagination() {
      return {
        pageSize: 8, //每页中显示数据
      };
    },
  },
  created() {
    this.getGroupData();
  },
};
</script>

<style>
</style>